﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加dayjs到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加vue到全局 -->
    <script src="./publicJs/vue.global.prod.js"></script>
    <!-- 自动添加axios到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加Cookies到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加XLSX到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>

    <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
    <!-- 自动添加ElementPlus到全局 -->
    <script src="./publicJs/element-plus.index.full.js"></script>
    <script src="./publicJs/index.iife.min.js"></script>
    <!-- 添加组件到全局 -->
    <script src="./components/production-order-info.js"></script>
    <script src="./components/production-process-info.js"></script>
    <script src="./components/production-bom-info.js"></script>

    <title>生产订单管理</title>
  </head>

  <body>
    <div id="app">
      <div v-loading="loading">
        <el-row :gutter="10">
          <el-col :span="24" style="text-align: left">
            <div class="input-group" style="display: flex">
              <el-button type="success" @click="addBtnClick">下达</el-button>
              <el-button type="success" @click="addBtnClick">撤销下达</el-button>
              <el-button type="success" @click="addBtnClick">预排产</el-button>
              <el-button type="success" @click="addBtnClick">撤销预排产</el-button>
              <el-button type="success" @click="addBtnClick">终止</el-button>
              <el-button type="success" @click="addBtnClick">删除</el-button>
              <el-button type="success" @click="addBtnClick">刷新</el-button>
              <el-button type="success" @click="addBtnClick">时间</el-button>
              <el-button type="success" @click="addBtnClick">确认完成</el-button>
              <el-input v-model="tableDatas.filters.searchText" clearable>
                <template #prepend>
                  <el-icon :size="15" color="#409EFF">
                    <edit />
                  </el-icon>
                  搜索
                </template>
              </el-input>
            </div>
          </el-col>
        </el-row>

        <el-dialog v-model="dialogDatas.dialogFormVisible" :title="dialogDatas.title" top="5vh" width="80vw">
          <el-scrollbar max-height="70vh">
            <el-tabs model-value="生产订单">
              <el-tab-pane label="生产订单" name="生产订单">
                <production-order-info :workorder="dialogDatas.orderData.workorder"></production-order-info>
              </el-tab-pane>
              <el-tab-pane label="工艺配置" name="工艺配置">
                <production-process-info
                  :process-list="dialogDatas.orderData.processData.tableData"
                  @add-process="dialogDatas.orderData.processData.handleAdd"
                  @delete-process="dialogDatas.orderData.processData.handleDelete"
                  @replace-process="dialogDatas.orderData.processData.handleReplace"
                ></production-process-info>
              </el-tab-pane>
              <el-tab-pane label="Bom" name="Bom">
                <production-bom-info
                  :work-order-id="dialogDatas.orderData.orderId"
                  :bom-data="dialogDatas.orderData.bomData.tableData"
                ></production-bom-info>
              </el-tab-pane>
              <el-tab-pane label="SN清单" name="SN清单">Task</el-tab-pane>
              <el-tab-pane label="MES标准工序" name="MES标准工序">Task</el-tab-pane>
            </el-tabs>
          </el-scrollbar>

          <template #footer>
            <span>
              <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogDatas.confirmBtnClick">确定</el-button>
            </span>
          </template>
        </el-dialog>

        <!-- 表格右键菜单 -->
        <teleport to="body">
          <el-dropdown
            ref="dropdown"
            v-model="tableDatas.filters.contextMenu.visible"
            :hide-on-click="true"
            trigger="contextmenu"
          >
            <div
              :style="{ 
                left: tableDatas.filters.contextMenu.left + 'px',
                top: tableDatas.filters.contextMenu.top + 'px',
                position: 'fixed',
              }"
            ></div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="tableDatas.handleMenuClick('查看详情')">查看详情</el-dropdown-item>
                <el-dropdown-item @click="tableDatas.handleMenuClick('删除')" divided>删除</el-dropdown-item>
                <el-dropdown-item @click="tableDatas.handleMenuClick('复制')">复制</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </teleport>

        <el-row :gutter="10">
          <!-- 状态选择 -->
          <el-col :span="3">
            <el-card class="marginTop10" shadow="never">
              <el-scrollbar max-height="85vh">
                <div v-for="option in tableDatas.filters.stateOptions" style="text-align: left">
                  <el-radio
                    v-model="tableDatas.filters.state"
                    :value="option['value']"
                    size="large"
                    @change="getTableDatas"
                    >{{option['label']}}</el-radio
                  >
                </div>
              </el-scrollbar>
            </el-card>
          </el-col>
          <!-- 订单展示 -->
          <el-col :span="21">
            <el-table
              class="marginTop10"
              :data="tableDatas.tableDatasAfterPage"
              @row-contextmenu="tableDatas.handleContextMenu"
              stripe
              border
              max-height="88vh"
              empty-text="无数据"
            >
              <el-table-column
                v-for="column in tableDatas.tableColumns"
                :type="column.type"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :formatter="column.formatter"
                :width="column.width"
              >
                <template #default="scope" v-if="column.prop =='operate'">
                  <div>
                    <el-button type="success" @click="tableDatas.editBtnClick(scope.row)">修改</el-button>
                    <el-popconfirm
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      title="确定删除该条记录?"
                      @confirm="tableDatas.deleteBtnClick(scope.row)"
                    >
                      <template #reference>
                        <el-button type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </body>
  <script type="module">
    import myAxios from './myAxios/myAxios.js'
    import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
    import v4 from './publicJs/uuidv4.js'

    const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue
    const { Edit, Search } = ElementPlusIconsVue
    const app = createApp({
      name: 'ProductionOrderManagement',
      components: {
        ProductionOrderInfo: ProductionOrderInfo,
        ProductionProcessInfo: ProductionProcessInfo,
        ProductionBomInfo: ProductionBomInfo,
        Edit,
      },
      setup() {
        let loading = ref(false)
        let addBtnClick = function () {
          showFormDialog()
        }

        let showFormDialog = function (data) {
          dialogDatas.title = '订单号: ' + data.orderId
          dialogDatas.orderData = data
          dialogDatas.dialogFormVisible = true
        }

        let dialogDatas = reactive({
          title: '',
          orderData: {
            workorder: {},
            processData: {
              tableData: [],
              handleAdd: function () {
                console.log('1 :>> ', 1)
              },
              handleDelete: function () {
                console.log('2 :>> ', 2)
              },
              handleReplace: function () {
                console.log('3 :>> ', 3)
              },
            },
            bomData: {
              tableData: [],
            },
          },
          dialogFormVisible: false,
          confirmBtnClick: function () {},
          cancelBtnClick: function () {},
        })

        let getTableDatas = function () {
          loading.value = true

          let params = `${tableDatas.filters.state}`
          let name = `陈帅廷查询大连订单信息(测试)`
          myAxios
            .get(name, params, '9900')
            .then((res) => {
              if (res instanceof Array) {
                loading.value = false
                tableDatas.oritableData = [...res]
                showSuccess('最新数据获取成功!')
              } else {
                loading.value = false
                showWarning('获取数据失败res!' + res)
              }
            })
            .catch((err) => {
              loading.value = false
              showWarning('获取数据失败err!' + err)
            })
        }

        onMounted(() => {
          getTableDatas()
        })

        let searchKeys = []
        let dropdown = ref(null)
        let tableDatas = reactive({
          filters: {
            state: 1,
            stateOptions: [
              { value: 0, label: '新建' },
              { value: 1, label: '已排产' },
              { value: 2, label: '暂停' },
              { value: 3, label: '完工' },
              { value: 4, label: '关闭' },
            ],
            searchText: '',
            contextMenu: {
              visible: false,
              left: 0,
              top: 0,
              row: null,
              index: -1,
            },
            currentPage: 1,
            pagesize: 10,
            handleSizeChange(val) {
              tableDatas.filters.pagesize = val
            },
            handleCurrentChange(val) {
              tableDatas.filters.currentPage = val
            },
          },
          tableDatasAfterFilter: computed(() => {
            let fData = tableDatas.oritableData

            if (tableDatas.filters.searchText) {
              let searchText = tableDatas.filters.searchText
              fData = fData.filter((item) => {
                return searchKeys.some((key) => {
                  return String(item[key]).toLowerCase().includes(searchText.toLowerCase())
                })
              })
            }

            return fData
          }),
          tableDatasAfterPage: computed(() => {
            let fData = tableDatas.tableDatasAfterFilter
            return fData
          }),
          tableColumns: [
            {
              type: 'index',
              prop: '',
              label: '序号',
              align: 'center',
              width: 60,
            },
            {
              prop: 'JM_WORKORDERID',
              label: '订单号',
              align: 'center',
              width: 100,
            },
            {
              prop: 'MATCODE',
              label: '物料号',
              align: 'center',
              width: 100,
            },
            {
              prop: 'MATNAME',
              label: '物料描述',
              align: 'center',
              width: 200,
            },
            {
              prop: 'WOPLANDATE',
              label: '计划开始日期',
              align: 'center',
              width: 110,
              formatter: function (row, column) {
                try {
                  return row['CREATETIME'].substring(0, 10)
                } catch (e) {
                  return row['CREATETIME']
                }
              },
            },
            {
              prop: 'WOCOMDATE',
              label: '计划完成日期',
              align: 'center',
              width: 110,
              formatter: function (row, column) {
                try {
                  return row['CREATETIME'].substring(0, 10)
                } catch (e) {
                  return row['CREATETIME']
                }
              },
            },
            {
              prop: 'WOPLANQTY',
              label: '计划数量',
              align: 'center',
              width: 90,
            },
            {
              prop: 'WOSCHEDULEQTY',
              label: '排产数量',
              align: 'center',
              width: 90,
            },
            {
              prop: 'WOCOMPQTY',
              label: '完成数量',
              align: 'center',
              width: 90,
            },
            {
              prop: 'WOCOMMENTS',
              label: '备注',
              align: 'center',
            },
            {
              prop: 'CREATETIME',
              label: '创建日期',
              align: 'center',
              width: 100,
              formatter: function (row, column) {
                try {
                  return row['CREATETIME'].substring(0, 10)
                } catch (e) {
                  return row['CREATETIME']
                }
              },
            },
            {
              prop: 'operate',
              label: '操作',
              align: 'center',
              width: 170,
            },
          ],
          oritableData: [],
          handleContextMenu: function (row, column, event) {
            event.preventDefault()
            tableDatas.filters.contextMenu.visible = false
            nextTick(() => {
              dropdown.value.handleClose()
            })

            tableDatas.filters.contextMenu = {
              visible: true,
              left: event.clientX,
              top: event.clientY,
              row: row,
              index: tableDatas.oritableData.indexOf(row),
            }

            setTimeout(() => {
              dropdown.value.handleOpen()
            }, 1)
          },
          handleMenuClick: async function (action) {
            loading.value = true
            tableDatas.filters.contextMenu.visible = false

            let orderId = tableDatas.filters.contextMenu.row.JM_WORKORDERID
            let orderData = {
              orderId: orderId,
              workorder: tableDatas.filters.contextMenu.row,
              processData: {
                tableData: [],
              },
              bomData: {
                tableData: [],
              },
            }
            let processParam = `${orderId}`
            let processData = await myAxios.get('陈帅廷查询大连订单工艺路线', processParam)
            orderData.processData.tableData = processData

            let bomParam = `${orderId}`
            let bomData = await myAxios.get('陈帅廷查询大连订单BOM', bomParam)
            orderData.bomData.tableData = bomData

            console.log(orderData)
            switch (action) {
              case '查看详情':
                showFormDialog(orderData)
                break
              case '删除':
                tableDatas.oritableData.splice(tableDatas.filters.contextMenu.index, 1)
                break
              case '复制':
                break
            }
            loading.value = false
          },
          editBtnClick: function (row) {
            showFormDialog(row)
          },
          deleteBtnClick: function (row) {
            loading.value = true
            let JM_WORKORDERID = row.JM_WORKORDERID

            let params = `0004`
            myAxios
              .post('删除', params)
              .then((res) => {
                if (res.includes('成功')) {
                  loading.value = false
                  showSuccess('删除成功!' + res)
                  tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1)
                } else {
                  loading.value = false
                  showWarning('删除失败res!' + res)
                }
              })
              .catch((err) => {
                loading.value = false
                showWarning('删除失败err!' + err)
              })
          },
        })

        return {
          loading,
          addBtnClick,
          getTableDatas,
          dialogDatas,
          dropdown,
          tableDatas,
        }
      },
    })

    app.use(ElementPlus)
    app.mount('#app')
  </script>
</html>
<style>
  .marginTop10 {
    margin-top: 10px;
  }
</style>
